<template>
  <div class="layout">
    <div class="map abs full">
      <Map />
    </div>
    <div class="head abs">
      <div class="logo abs"></div>
      <div class="time-box abs">
        <div class="time inline">{{ time }}</div>
        <div class="date inline">
          <div>{{week}}</div>
          <div>{{date}}</div>
        </div>
      </div>
    </div>
    <div class="content abs">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import util from '@/libs/util'
import Map from '@/components/Map'
export default {
  components: {
    Map
  },
  methods: {
    getTime() {
      this.time = util.formatTime('HH:mm:ss')
      this.week = util.formatTime('W')
      this.date = util.formatTime('yyyy/MM/dd')
    }

  },
  mounted() {
    this.getTime()
    this.timer = setInterval(() => {
      this.getTime()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  data() {
    return {
      time: '',
      week: '',
      date: '',
      timer: null
    }
  }
}
</script>

<style lang="less" scoped>
.layout {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-size: 100% 100%;
  .head {
    position: absolute;
    width: 100%;
    height: 80px;
    background-image: url(~@/assets/images/navbar.png);
    background-repeat: no-repeat;
    background-position: bottom;
    .logo {
      left: 0;
      top: 6px;
      background-size: 100% 100%;
    }
  }
  .time-box {
    font-size: 16px;
    color: #a3bfd3;
    height: 70px;
    top: 0;
    right: 20px;
    .time{
      font-size: 24px;
      line-height: 70px;
    }
    .date{
      line-height: 25px;
      text-align: left;
      margin-left: 10px;
    }
  }
  .content {
    position: absolute;
    width: 100%;
    height: calc(100% - 80px);
    top: 80px;
    left: 0;
    pointer-events: none;
  }
}
</style>
